<!DOCTYPE html>
<html>

	<head>
		<style>
			html,body {height:100%;}
			body {margin:0;}
			img {width:640px; height:378px; position:absolute; left:50%; top:50%; margin-top:-189px; margin-left:-320px;}
		</style>
		<meta charset="utf-8" />
		<title>360度全景展示</title>

		<script>
			window.onload=function(){
			//	var img0= document.getElementById("img0");
			//	img0.index = 0;
				//缓冲区
				var frag = document.createDocumentFragment();
				//加载所有图片
				for(var i=1; i<=76; i++){
					var img = document.createElement("img");
					img.id = i;
					img.src = "img/"+i+".jpg";
					img.style.display = "none";
					frag.appendChild(img);
				}
				document.body.appendChild(frag);
				//伪数组  instanceof NodeList
				imgs = document.getElementsByTagName("img");
				var lastIndex = 0;
				var startX = 0;
				var index = 0;
				var prevImg = null;
				document.onmousedown = function(event){
					startX = event.clientX;
					document.onmousemove = function(event){
						//随着移动，更换图片
						var x = event.clientX;
						var dis = x - startX;
						if(dis >= 0) {
							index = (lastIndex + Math.floor(dis/10))%77;
						} else {
							index = (77 + lastIndex + Math.floor(dis/10))%77;
						} 
						
						//效率待改进
//						for(var i=0; i<imgs.length; i++) {
//							imgs[i].style.display = "none";
//						}
						
						if(prevImg) prevImg.style.display = "none";
						
						//console.log(imgs[index],index)
						imgs[index].style.display = "block";
						document.title = index;
						prevImg = imgs[index];
					}
				}
				document.onmouseup = function(event){
					//鼠标松开时记录位置
					lastIndex = index;
					document.onmousemove = "";
				}
			};
		</script>
	</head>

	<body>
		<div style="z-index: 100; opacity: 0.01; background: black; position: fixed; width: 100%; height: 100%;"></div>
		<img id="img0" src="img/0.jpg" />
	</body>

</html>